<template>
  <!-- 主div盒子 -->
  <el-card>
    <div class="main">
      <div class="container">
        <!-- data：绑定接口参数列表 ,border：边框，stripe：隔行变色 -->
        <!-- :header-cell-style给表头添加背景颜色 -->
        <!-- 数据展示表单 -->
        <el-table
          :data="loggerList"
          border
          stripe
          style="
            width: 100%;
            font-size: 14px;
            box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
          "
          :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        >
          <!-- 索引列 -->
          <el-table-column
            type="index"
            label="序列"
            min-width="5%"
            align="center"
          >
          </el-table-column>
          <!-- 接口名字列 -->
          <el-table-column
            label="接口名字"
            prop="name"
            min-width="5%"
            align="center"
          ></el-table-column>
          <!-- 接口端口tag标签 -->
          <el-table-column
            label="端口"
            prop="port"
            min-width="5%"
            align="center"
          >
            <!-- tag标签，采用嵌套三元表达式的方法，判断端口号的地址，动态显示颜色 -->
            <template slot-scope="scope">
              <!-- 若接口为‘9000’，则显示success， 若不是则执行后面的嵌套层 -->

              <el-tag
                effect="dark "
                :type="
                  scope.row.port == '9000'
                    ? 'success'
                    : scope.row.port == '9005'
                    ? 'primary'
                    : scope.row.port == '9006'
                    ? 'danger'
                    : scope.row.port == '9007'
                    ? 'warning'
                    : 'info'
                "
              >
                {{ scope.row.port }}</el-tag
              >
            </template>
          </el-table-column>
          <!-- 接口地址列 -->
          <el-table-column
            label="接口地址"
            prop="parameters"
            min-width="5%"
            align="center"
          ></el-table-column>
          <!-- 接口简介列 -->
          <el-table-column
            label="接口简介"
            prop="introduce"
            min-width="5%"
            align="center"
          ></el-table-column>
          <!-- 接口状态列 -->
          <el-table-column
            label="接口状态"
            prop="state"
            min-width="5%"
            align="center"
          >
            <!-- tag标签，采用嵌套三元表达式的方法，判断接口的状态，动态显示颜色 -->
            <template slot-scope="scope">
              <!-- 若状态为‘正常’，则显示success，  -->
              <el-tag
                effect="light"
                :type="scope.row.state == '正常' ? 'success' : 'danger'"
              >
                {{ scope.row.state }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 size-change:每页最大变化 current-change：当前页数变化 layout：功能组件 
    之前不能实现切换的bug改好~！-->
        <div class="block" style="text-align: center; margin-top: 15px">
          <div class="pageHelper">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="fromData.pageIndex"
              :page-sizes="pageInfo.pageSizes"
              :page-size="fromData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  created() {
    this.queryLogList(); //调用获得所有接口信息方法
  },
  data() {
    return {
      loggerList: [], //定义一个存放数据的列表
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 6, 7], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    //获得所有接口参数信息，方法已实现
    async queryLogList() {
      const { data: res } = await this.$http.get(
        "http://localhost:9000/sys/log/list" /* 调用后端9000下的查询所有接口参数的方法 */,
        {
          params: this.fromData,
        }
      );
      if (res.code != 200) {
        this.$message.error("获取接口信息失败");
      }
      this.loggerList = res.data.list; //获取所有菜单
      this.pageInfo.total = res.data.total; //获得数据库中所有总数
    },

    //每页显示的条目个数
    handleSizeChange(val) {
      this.fromData.pageSize = val;
      this.queryLogList(); //获取当前用户列表
    },
    //当前页数，
    handleCurrentChange(val) {
      this.fromData.pageIndex = val;
      this.queryLogList(); //获取当前用户列表
    },
  },
};
</script>

<style Lang="less" scoped></style>
